<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- JSX是JS语法的扩展(可以在JS的语法环境中书写标签,扩展)xml
        // root.render(<div>我是JSX过来的</div>);
    }
    {
        // 2- 不要将JSX与HTML语法对等,如果标签名以大写开头,那么React会将其解析为组件(后面讲)
        // root.render(<my></my>);
    }
    {
        // 3- 标签必须闭合
        // root.render(<div>)
    }
    {
        // 4- 支持
        // root.render(<div/>);
    }
    {
        // 5- 有且只能是一个根元素
        // 以下是正确的
        // root.render(<div><p>1</p><p>2</p></div>);
        // 以下不允许
        // root.render(<p>1</p><p>2</p>);
    }
    {
        // 6- 建议将JSX直接通过括号包裹(如果元素比较复杂)
        // root.render((
        //     <div>
        //         <p>1</p>
        //         <p>2</p>
        //     </div>
        // ))
    }
    {
        // 7- 使用空标签(没有名字,不会进行任何的转换,也可以将其称为包裹标签)
        // root.render((
        //     <>
        //         <p>1</p>
        //         <p>2</p>
        //     </>
        // ))
    }
    {
        // 8- 使用包裹标签(React内置组件)
        root.render((
            <React.Fragment>
                <p>1</p>
                <p>2</p>
            </React.Fragment>
        ))
    }
</script>
</html>